<template>
    <el-container>
        <el-header>
            <el-row class="main-title">
                <img src="../assets/logo.png" class="logo">
                淘金通知(消息)中心
            </el-row>
        </el-header>
        <el-main>
            <el-row class="mb-normal">
                <el-radio-group v-model="selectedShop">
                    <el-radio-button name="chooseShop" :label="shopData.id">{{shopData.shopName}}</el-radio-button>
                </el-radio-group>
                <!-- <ul class="shop-list clear">
                    <el-radio-group v-model="selectedShop">
                        <li v-for="shop in shopList"> 
                            <el-radio-button name="chooseShop" :label="shop.id">{{shop.name}}</el-radio-button>
                        </li>
                    </el-radio-group>
                </ul> -->
            </el-row>
            <el-tabs v-model="activeName" @tab-click="handleTabs">
                <el-tab-pane label="发送短信" name="sendMessage">
                    <send-message @getShopData="getShopData" ref="sendMessage" :shopId="selectedShop"></send-message>
                </el-tab-pane>
                <el-tab-pane label="发送记录" name="sendRecord" @click="getRecord">
                    <send-record ref="sendRecord" :shopId="selectedShop"></send-record>
                </el-tab-pane>
            </el-tabs>
        </el-main>
    </el-container>
</template>

<script>
import sendMessage from './components/sendMessage'
import sendRecord from './components/sendRecord'
import { Message } from 'element-ui'
export default {
    name: 'messageMain',
    components: {
        sendMessage,
        sendRecord
    },
    data() {
        return {
            dataList:[],
            phone: '',
            activeName: 'sendMessage',
            selectedShop: '',
            shopData: '',
            currTab: ''
        }
    },
    created() {
        var self = this;
        self.selectedShop = self.shopData.id;
    },
    methods: {
        handleRefresh(val){
            this.$refs[val].fetchData()
        },
        handleTabs(item){
            if(this.currTab == this.activeName){
                return;
            }
            this.handleRefresh(item.name);
            this.currTab = item.name;
        },

        getShopData(data){
            var self = this;
            self.shopData = data;
            self.selectedShop = self.shopData.id;
        },
        getRecord(){
            this.ref.fetchData();
        }
    }
}
</script>
